<template>
  <a-modal
      title="预览代码"
      width="80%"
      :destroy-on-close="true"
      v-model:visible="visible"
      :bodyStyle="{padding:0,paddingTop:'10px'}"
  >
    <div style="display: flex">
      <a-list class="history" item-layout="horizontal" :data-source="history" @scroll="scrollHandle">
        <template #header>
          <span style="margin-left: 20px">历史记录</span>
        </template>
        <template #renderItem="{ item }">
          <div :class="['item',historyIndex==item.id?'active':'']" @click="selectHistory(item)">{{item.time}}</div>
        </template>
      </a-list>
      <div style="flex: 1;"  v-if="isRender">
        <div class="flex">
          <a-space align="baseline">
            <h4>{{title}}</h4>
            <a-button shape="circle" size="small" v-copy="cmOptions.origLeft">
              <template #icon>
                <copy-filled />
              </template>
            </a-button>
          </a-space>
          <a-space align="baseline">
            <h4>当前代码</h4>
            <a-button shape="circle" size="small" v-copy="cmOptions.value" style="margin-right: 10px">
              <template #icon>
                <copy-filled />
              </template>
            </a-button>
          </a-space>
        </div>
        <Codemirror

            :merge="true"
            :options="cmOptions"
            :height="550"
            @change="onChange"
        />
      </div>
    </div>
    <template #footer>
      <div class="flex">
        <a-button @click="save('left')">保存左侧</a-button>
        <a-button @click="save('right')">保存右侧</a-button>
      </div>
    </template>
  </a-modal>
</template>

<script>
export default {
  name: "codeDiff",
}
</script>
<script setup>
import { reactive,ref,watch } from 'vue'
import Codemirror from "codemirror-editor-vue3";
import 'codemirror/mode/php/php.js';
import 'codemirror/theme/material-ocean.css'
const props = defineProps({
  method:Object,
  code:{
    type:Object,
    default:{
      old:'',
      new:'',
    }
  }
})

const cmOptions = reactive({
  value: props.code.old,
  origLeft: props.code.new,
  connect: "align",
  theme:'material-ocean',
  mode: "application/x-httpd-php",
  lineNumbers: true,
  collapseIdentical: false,
  highlightDifferences: true,
  showDifferences: true,
})
const onChange = (val, instance) => {
  value.value = val
};
const visible = ref(false)
const isRender = ref(true)
const title = ref('生成代码')
const historyIndex = ref(-1)
const value = ref(props.code.old)
const history = ref([])
let page = 1
const size = 30
watch(()=>props.code,val=>{
  visible.value = true
  isRender.value = true
  cmOptions.value = "<"+'?'+"php\n" + val.old
  value.value = "<"+'?'+"php\n" + val.old
  cmOptions.origLeft = "<"+'?'+"php\n" + val.new
},{deep:true})
watch(visible,val=>{
  if(val){
    page = 1
    props.method.getHistory(page,size).then(data=>{
      history.value = data
    })
  }else{
    historyIndex.value = -1
  }
})
function scrollHandle(e){
  let el = e.target
  if((el.scrollTop + el.clientHeight) == el.scrollHeight && page > 0){
    page++
    props.method.getHistory(page,size).then(data=>{
      if(data.length != size){
        page = 0
      }
      history.value = history.value.concat(data)
    })
  }

}
function selectHistory(item){

  isRender.value = false

  title.value = item.time
  if(item.id == historyIndex.value){
    title.value = '生成代码'
    historyIndex.value = -1
    cmOptions.origLeft = "<"+'?'+"php\n" + props.code.new
  }else{
    historyIndex.value = item.id
    cmOptions.origLeft = "<"+'?'+"php\n" +item.code
  }

  setTimeout(()=>{
    isRender.value = true
  })

}
function save(type){
  let code
  if(type == 'left'){
    code = cmOptions.origLeft.replace("<"+'?'+"php\n",'')
  }else if(type == 'right'){
    code = value.value.replace("<"+'?'+"php\n",'')
  }
  props.method.saveCodeRequest(code).then(()=>{
    visible.value = false
  })
}
</script>
<style scoped lang="scss">
.history {
  max-height: 580px;
  overflow-y: auto;
  .item {
    padding:10px;
    cursor: pointer;
    color: #999999;
  }
  .item+.item{
    border-top: 1px solid #f0f0f0;
  }
  .active{
    color: #FFFFFF;
    background: var(--ant-primary-color);
  }
}
.flex{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
:deep([class*='language-'] code) {
  font-size: 12px!important;
}
:deep(.CodeMirror-merge-r-chunk+.CodeMirror-gutter-wrapper+.CodeMirror-line) {
  background-color: rgba(0,0,0,0.8);
}
:deep(.CodeMirror-merge-l-chunk){
  background-color: rgba(255,255,255,0.2);
}
:deep(.CodeMirror-merge-gap){
  background: #0F111A;
}
:deep(.CodeMirror-merge-spacer){
  background-color: rgba(0,0,0,0.8);
}
:deep(.CodeMirror-merge-copy){
  color: #FFFFFF;
}
</style>